<template>
	<view class="nav-bar">
		<view class="nav-bar-top">
			<view  :style="{height:statusHeight + 'rpx'}">
				<!-- 顶部部垫片撑起高度 -->
			</view>
				<!--当界面为搜索界面的时候，添加回退按钮  -->
			<view @click="returnArticleList" :style="{top:statusHeight + 'rpx'}" class="return-icon" v-if="isSearch">
					<uni-icons type="back" size="25" color="white"></uni-icons>
			</view>
			<view @click="getTo" :style="{marginRight:marginRight+'rpx',marginLeft:'25rpx'}" class="nav-bar-content">
				<uni-icons type="search" color="#999"></uni-icons>
					<view  v-if="!isSearch" class="nav-bar-search-txt">
						输入文章标题进行搜索
					</view>
				<input v-else class="search-input" v-model="searchVal" @confirm="changeInput" confirm-type="search"
				  type="text" placeholder="输入文章标题进行搜索">
			</view>
		</view>
		<!-- 底部垫片撑起高度 -->
		 <view :style="{height:80 + statusHeight + 'rpx'}"></view>
	</view>
</template>

<script>
	export default {
		name:"NavBar",
		props:{
			isSearch:{
				type:Boolean,
				default:false
			},
			parentVal: {
				type:String
			}
		},
		created() {
			this.getSystemInfo()
		},
		computed:{
			searchVal:{
				get() {
					return this.parentVal
				},
				set(val) {
					// 搜索值绑定
					this.$emit('updateVal',val)
					if(!val) {
						this.$emit('sendSearch')
					}
				}
			}
		},
		data() {
			return {
				statusHeight: 40, // 高度撑起
				marginRight: 0, // 使得离小程序胶囊得距离
				fali:''
			};
		},
		methods: {
			async getSystemInfo() {
				const systemInfo = await uni.getSystemInfoSync()
				this.statusHeight = systemInfo.statusBarHeight ? systemInfo.statusBarHeight * 2 : 20;
				/* 如果是小程序的换，进行胶囊处理*/
				// #ifdef MP-WEIXIN
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.marginRight = menuButtonInfo.width * 2
				this.statusHeight = menuButtonInfo.top * 2
				// #endif
			},
			getTo() {
				if(!this.isSearch){
					uni.navigateTo({
						url: '/pages/search/index',
					})
				}
			},
			returnArticleList(){
				uni.switchTab({
					url: '/pages/index/index',
				})
			},
			changeInput(){
				this.$emit('sendSearch')
			}
		}
	}
</script>
<style lang="scss" scoped>
.uni-mt-10{
	padding: 0px !important;
}
</style>
<style lang="scss" scoped>
@import './css/index.scss'

</style>
